<template>
  <div class="total">
    <header class="header">
        <img src="../../assets/images/logo.png" class="logo" @click="HomePage">
        <h3 class="title">三板村新闻动态</h3>
    </header>
    <el-table
        :data="tableData"
        stripe
        style="width: 80%; margin: 10px auto; border-radius: 8px; box-shadow: 4px 6px 3px 0px rgba(0,0,0,0.3);  "
        :header-cell-style="headerCellClassName">
        <el-table-column
        prop="date"
        label="日期"
        width="450">
        </el-table-column>
        <el-table-column
        prop="name"
        label="名称"
        width="auto">
        <template slot-scope="scope">  
            <!-- 使用 a 标签包裹内容，并添加 href 属性来指定跳转链接 -->  
            <router-link :to="scope.row.linkUrl">  
            {{ scope.row.name }}
            </router-link>  
      </template> 
        </el-table-column>
    </el-table>

    <div class="foot">
        <span>XXX提供技术支持</span>
    </div>
    <Foot></Foot>

    </div>
</template>

<script>
import Foot from '@/components/Footer'
export default {
    name: 'MyData',
    components:{
        Foot
    },
    data() {
        return {
            tableData:[
                {
                    date:'2024-05-26',
                    name:'珠海金湾红旗镇乡村龙舟赛开赛，16条“猛龙”龙舟竞逐三板河',
                    linkUrl: '/new'
                },
                {
                    date:'2024-05-26',
                    name:'珠海金湾红旗镇乡村龙舟赛开赛，16条“猛龙”龙舟竞逐三板河'
                },
                {
                    date:'2024-05-26',
                    name:'珠海金湾红旗镇乡村龙舟赛开赛，16条“猛龙”龙舟竞逐三板河'
                },
                {
                    date:'2024-05-26',
                    name:'珠海金湾红旗镇乡村龙舟赛开赛，16条“猛龙”龙舟竞逐三板河'
                },
                {
                    date:'2024-05-26',
                    name:'珠海金湾红旗镇乡村龙舟赛开赛，16条“猛龙”龙舟竞逐三板河'
                },
                {
                    date:'2024-05-26',
                    name:'珠海金湾红旗镇乡村龙舟赛开赛，16条“猛龙”龙舟竞逐三板河'
                },
                {
                    date:'2024-05-26',
                    name:'珠海金湾红旗镇乡村龙舟赛开赛，16条“猛龙”龙舟竞逐三板河'
                },
                {
                    date:'2024-05-26',
                    name:'珠海金湾红旗镇乡村龙舟赛开赛，16条“猛龙”龙舟竞逐三板河'
                },
                {
                    date:'2024-05-26',
                    name:'珠海金湾红旗镇乡村龙舟赛开赛，16条“猛龙”龙舟竞逐三板河'
                },
                {
                    date:'2024-05-26',
                    name:'珠海金湾红旗镇乡村龙舟赛开赛，16条“猛龙”龙舟竞逐三板河'
                },
                {
                    date:'2024-05-26',
                    name:'珠海金湾红旗镇乡村龙舟赛开赛，16条“猛龙”龙舟竞逐三板河'
                },
                {
                    date:'2024-05-26',
                    name:'珠海金湾红旗镇乡村龙舟赛开赛，16条“猛龙”龙舟竞逐三板河'
                },
                {
                    date:'2024-05-26',
                    name:'珠海金湾红旗镇乡村龙舟赛开赛，16条“猛龙”龙舟竞逐三板河'
                },
                {
                    date:'2024-05-26',
                    name:'珠海金湾红旗镇乡村龙舟赛开赛，16条“猛龙”龙舟竞逐三板河'
                },
                {
                    date:'2024-05-26',
                    name:'珠海金湾红旗镇乡村龙舟赛开赛，16条“猛龙”龙舟竞逐三板河'
                },
            ]
        }
    },
    methods:{
        HomePage(){
            this.$router.push('/home')
        },
        headerCellClassName() {  
            return 'background-color: #ececec;' 
        },
    }
}
</script>

<style lang="scss" scoped>
.total{
    padding: 0;
    margin: 0;
    height: auto;
    width: 100%;
    background: url(../../assets/images/green.png) no-repeat fixed;
    background-size: cover;
}
a{
    color: red;
    text-decoration: none;
}
a:hover{
    color: skyblue;
}
.header{
    top: 0;
    height: 100px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .logo{
        width: 250px;
        height: auto;
        margin-left: 3%;
    }

    .title{
        margin: 0 auto;
        margin-right: 40%;
        font-size: 2.25rem;
        color: #666;
    }
}
.foot{
  width: 100%;
  margin: 0 auto;
  padding: 10px 0;
  text-align: center;
  color: rgb(117, 134, 151);;
}
</style>